<template>
    <div class="person">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>车：{{ person.car }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeperson">修改人</button>
        <button @click="changeCar">修改车</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {reactive,watch} from 'vue'
    //data
    let person = reactive({
        name:"zhang-san",
        age:18,
        car:{
            c1:'奔驰',
            c2:'宝马'
        }
    })
    //function
    function changeName(){
                person.name +="~"
            }
    function changeAge(){
                person.age +=1
            }
    function changeperson(){
        Object.assign(person,{//此方法没换对象的地址值，只是换了属性
            name:"li-si",
            age:17
        })
    }
    function changeCar(){
        person.car = {c1:'雅迪',c2:'小鸟'}
    }
    //watch
    watch(//监视多个对象类型的属性，此时value是数组
    [()=>person.age,()=>person.name,person.car],
    (newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },{deep:true})

</script>
    
<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>